import { Suspense } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/Card'
import { Button } from './ui/Button'
import { LoadingSpinner } from './ui/LoadingSpinner'
import { LazyConfigurationForm } from './LazyComponents'
import validator from '@rjsf/validator-ajv8'

interface ConfigurationModalProps {
  editing: string | null
  formSchema: any
  formValue: Record<string, any>
  onFormChange: (formData: any) => void
  onSave: () => void
  onCancel: () => void
}

export function ConfigurationModal({
  editing,
  formSchema,
  formValue,
  onFormChange,
  onSave,
  onCancel
}: ConfigurationModalProps) {
  if (!editing || !formSchema) return null

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
      <Card className="w-full max-w-2xl max-h-[80vh] overflow-auto">
        <CardHeader>
          <CardTitle>Configure Plugin</CardTitle>
          <CardDescription>{editing}</CardDescription>
        </CardHeader>
        <CardContent>
          <Suspense fallback={<LoadingSpinner text="Loading configuration form..." />}>
            <LazyConfigurationForm
              schema={formSchema}
              formData={formValue}
              validator={validator}
              onChange={(e: any) => onFormChange(e.formData)}
              onSubmit={onSave}
            >
              <div className="flex items-center space-x-2 mt-4">
                <Button type="submit">Save Configuration</Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={onCancel}
                >
                  Cancel
                </Button>
              </div>
            </LazyConfigurationForm>
          </Suspense>
        </CardContent>
      </Card>
    </div>
  )
}
